import React from 'react'
import { Card, message, Modal, Tag, Switch } from 'antd'
import ModalEdit from './ModalEdit'
import TableX from 'components/TableX'
import Options from 'components/TableX/Options'
import axios from 'axios'
import { checkres } from 'utils'
import PageWrapper from 'components/PageWrapper'
import ModalTable from './ModalTable'

export default function Configuration() {
  const recordRef = React.useRef({})
  const tableXRef = React.useRef()
  const paramsRef = React.useRef()
  const [rowKeys, setRowKeys] = React.useState([])
  const [rowKeysStr, setRowKeysStr] = React.useState()
  const [modalEdit, setModalEdit] = React.useState({ visible: false })
  const [modalTable, setModalTable] = React.useState({ visible: false })

  function request({ pageIndex, pageSize, fields }) {
    paramsRef.current = { pageIndex, pageSize, ...fields }
    return axios
      .post('/forward/query', { pageIndex, pageSize, ...fields })
      .then(res => {
        if (!checkres(res)) return []
        return {
          list: res.data.data.records,
          total: res.data.data.total,
        }
      })
  }

  const onChangeSwitching = (record, checked) => {
    const params = {
      switching: checked ? 1 : 0,
      runStatus: checked ? 1 : 0,
      id: record.id,
    }
    axios.post('/forward/update', { ...params }).then(res => {
      if (!checkres(res)) return
      tableXRef.current.update()
    })
  }

  return (
    <PageWrapper>
      <Card>
        <ModalEdit
          record={recordRef.current}
          onOk={() => tableXRef.current.update()}
          onCancel={() => setModalEdit({ visible: false })}
          {...modalEdit}
        />
        <ModalTable
          // record={recordRef.current}
          // onOk={() => tableXRef.current.update()}
          onCancel={() => setModalTable({ visible: false })}
          {...modalTable}
        />
        <TableX
          rowKey="id"
          ref={tableXRef}
          request={request}
          rowSelection={{
            type: 'checkbox',
            selectedRowKeys: rowKeys,
            onChange: selectRowKeys => {
              setRowKeysStr(selectRowKeys.join(','))
              setRowKeys(selectRowKeys)
            },
          }}
          toolbarButtons={[
            {
              preset: 'add',
              onClick: () => setModalEdit({ mode: 'add', visible: true }),
            },
            {
              preset: 'delete',
              onClick: () => {
                if (rowKeys.length === 0) {
                  message.info('请选择一条数据')
                  return false
                }
                Modal.confirm({
                  title: '删除',
                  content: '是否确认删除?',
                  okText: '确认',
                  cancelText: '取消',
                  okType: 'danger',
                  onOk() {
                    rowKeys &&
                      axios
                        .get('/forward/delete', {
                          params: { ids: rowKeysStr },
                        })
                        .then(res => {
                          if (res.data.code === 1) {
                            message.success(res.data.msg)
                            tableXRef.current.update()
                            setRowKeys([])
                          } else {
                            message.error(res.data.msg)
                          }
                        })
                  },
                  onCancel() {},
                })
              },
            },
          ]}
          searchForm={[{ label: '平台名称', name: 'name', preset: 'text' }]}
          columns={[
            { dataIndex: 'name', title: '平台名称' },
            { dataIndex: 'account', title: '转发账号' },
            { dataIndex: 'accountFiling', title: '备案账号' },
            {
              dataIndex: 'runStatus',
              title: '运行状态',
              render: v => (
                <Tag color={['red', 'green'][v]}>{['停止', '运行'][v]}</Tag>
              ),
            },
            {
              title: '启停控制',
              dataIndex: 'switching',
              render: (v, o) => (
                <Switch
                  checked={o.switching == 1 ? true : false}
                  checkedChildren="NO"
                  unCheckedChildren="OFF"
                  onClick={checked => onChangeSwitching(o, checked)}
                />
              ),
            },
            { dataIndex: 'createTime', title: '创建时间' },
            {
              dataIndex: 'options',
              title: '操作',
              render: (v, o) => (
                <Options
                  buttons={[
                    {
                      preset: 'edit',
                      onClick: () => {
                        recordRef.current = o
                        setModalEdit({ mode: 'update', visible: true })
                      },
                    },
                    {
                      label: '选择车辆',
                      onClick: () => {
                        setModalTable({ visible: true, forwardCfgId: o.id })
                      },
                    },
                  ]}
                ></Options>
              ),
            },
          ]}
        />
      </Card>
    </PageWrapper>
  )
}
